<template> 
	<div class="JNPF-common-layout">
		<div class="JNPF-common-layout-center">
			<el-row class="JNPF-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="摄像头名称">
							<el-input v-model="query.sxtmc" placeholder="摄像头名称" clearable  />
						</el-form-item>
					</el-col>
					<el-col :span="6">
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
						<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
					</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="JNPF-common-layout-main JNPF-flex-main">
				<div class="JNPF-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">
							新增
						</el-button>
					</div>
					<div class="JNPF-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"  @click="reset()" />
						</el-tooltip>
						<screenfull :isContainer="true" />
						<el-tooltip effect="dark" content="列设置" placement="top">
							<el-link icon="icon-ym icon-ym-options JNPF-common-head-icon" :underline="false" />
						</el-tooltip>
					</div>
				</div>
				<JNPF-table v-loading="listLoading" :data="list">
					<el-table-column prop="sxtbh" label="摄像头编号" align="left" />
					<el-table-column prop="sxtmc" label="摄像头名称" align="left" />
					<el-table-column prop="dkh" label="端口号" align="left" />
					<el-table-column prop="tdh" label="通道号" align="left" />
					<el-table-column prop="user" label="用户名" align="left" />
					<el-table-column prop="azwz" label="安装位置" align="left" />
					<el-table-column label="所属区域"  prop="ssqy" algin="left">
						<template slot-scope="scope">{{ scope.row.ssqy | dynamicText(ssqyOptions) }}</template>
					</el-table-column>
					<el-table-column prop="spldz" label="视频地址" align="left" />
					<el-table-column prop="spjkfs" label="视频监控方式" align="left" />
					<el-table-column prop="spjkcj" label="视频监控厂家" align="left" />
					<el-table-column prop="xdwz" label="平面图相对位置" align="left" />
					<el-table-column label="操作" fixed="right" width="150">
						<template slot-scope="scope">
							<el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >
								编辑
							</el-button>
							<el-button type="text" @click="handleDel(scope.row.id,scope.row)" class="JNPF-table-delBtn">
								删除
							</el-button>
                            <el-button type="text" @click="addOrUpdateHandle(scope.row.id,true)" >
								详情
							</el-button>
						</template>
					</el-table-column>
				</JNPF-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
			</div>
		</div>
		<JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
	</div>

</template> 
<script>
    import request from '@/utils/request'
    import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
    import JNPFForm from './Form'
    import ExportBox from './ExportBox'
    import {previewDataInterface} from '@/api/systemData/dataInterface'
    import 'qrcodejs2/jquery.min.js'
    import { mapGetters, mapState } from 'vuex'
    import VIDEOURL from '../../../utils/define'

    export default {
        components: {JNPFForm, ExportBox},
        computed: {
            ...mapState({
            showLanguage: state => state.settings.showLanguage,
            showSearch: state => state.settings.showSearch,
            showSettings: state => state.settings.showSettings,
            }),
            ...mapGetters(['device', 'userInfo']),
  	    },
        data() {
            return {
                showAll: false,
                query: {
					sxtmc:undefined,

                },
                defaultProps: {
                    children: 'children',
                    label: 'fullName'
                },
                list: [],
                listLoading: true,
                total: 0,
                listQuery: {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                },
                formVisible: false,
                exportBoxVisible: false,
                columnList: [
					{prop: 'sxtbh', label: 'NVR编号'},
					{prop: 'sxtmc', label: 'NVR名称'},
					{prop: 'dkh', label: '端口号'},
					{prop: 'tdh', label: '通道号'},
					{prop: 'user', label: '用户名'},
					{prop: 'azwz', label: '安装位置'},
					{prop: 'ssqy', label: '所属区域'},
					{prop: 'spldz', label: '视频地址'},
					{prop: 'spjkfs', label: '视频监控方式'},
					{prop: 'spjkcj', label: '视频监控厂家'},
					{prop: 'xdwz', label: '平面图相对位置'},

                ],
				ssqyOptions:[],

                // UrlViod: "http://192.168.10.120:8090/",//获取视频功能数据地址
                UrlViod: ''  //  获取视频功能数据地址  
            }
        },
        created() {
            this.getSsqyOptions();
			// this.initData();
            this.UrlViod = VIDEOURL.VIDEOURL;
        },
        methods: {
            getSsqyOptions()
            {
                previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
                    this.ssqyOptions = res.data;
                    this.initData();
                })
            },


            initData() {
                this.listLoading = true;
                let query = {
                    ...this.listQuery,
                    ...this.query
                };
                request({
                    url: `/api/System/SXTGL`,
                    method: 'get',
                    data: query
                }).then(res => {
                    let listData = res.data.list
                    for(let i=0;i<listData.length;i++){
                        for(let r=0;r<this.ssqyOptions.length;r++){
                            if(listData[i].ssqy == this.ssqyOptions[r].ID){
                                listData[i].ssqy =  this.ssqyOptions[r].MC;
                            }
                        } 
                    }
                    this.list = listData
                    this.total = res.data.pagination.total
                    this.listLoading = false
                    this.$nextTick(() => {
                        this.tableHeight = "100%"
                    });
                })
            },
            handleDel(id,row) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.viodget(id,row);
                    // request({
                    //     url: `/api/System/SXTGL/${id}`,
                    //     method: 'DELETE'
                    // }).then(res => {
                    //     this.$message({
                    //         type: 'success',
                    //         message: res.msg,
                    //         onClose: () => {
                    //             this.initData()
                    //         }
                    //     });
                    // })
                }).catch(() => {
                });
            },
            //-
            viodget(id,row){
                let that = this;
                var date = row;
                var tonken = date.sxtbh
                var nameUrl = '';
                let tons = '';
                if (date.spjkfs == '设备SDK') {
                    nameUrl = 'DelDevice';
                    var tonattr = tonken.split('--');
                    tons = tonattr[0];
                } else {
                    nameUrl = 'DelSrc';
                    tons = tonken;
                }
                var object = {
                    url: this.UrlViod + 'api/v1/' + nameUrl,
                    type: 'get',
                    obj: {
                        token: tons,
                        session: that.userInfo.userId //获取用户ID 
                    },
                    async: false,
                };
			    this.Vido1(id,object);
            },
            Vido1(id,object) {
                let that = this;
                $.ajax({
                    url: object.url,
                    type: object.type,
                    dataType: "json",
                    data: object.obj,
                    async: object.async,
                    success: function (data) {
                        if(data.bStatus == true && data.strCode == "Del successfully"){
                            request({
                                url: `/api/System/SXTGL/${id}`,
                                method: 'DELETE'
                            }).then(res => {
                                that.$message({
                                    type: 'success',
                                    message: res.msg,
                                    onClose: () => {
                                        that.initData()
                                    }
                                });
                            })
                        } 
                    }
                })
		    },	

            addOrUpdateHandle(id,isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.JNPFForm.init(id,isDetail)
                })
            },
            exportData() {
                this.exportBoxVisible = true
                this.$nextTick(() => {
                    this.$refs.ExportBox.init(this.columnList)
                })
            },
            download(data) {
                let query = {...data, ...this.listQuery, ...this.query}
                request({
                    url: `/api/System/SXTGL/Actions/Export`,
                    method: 'POST',
                    data: query
                }).then(res => {
                    if (!res.data.url) return
                    window.location.href = this.define.comUrl + res.data.url
                    this.$refs.ExportBox.visible = false
                    this.exportBoxVisible = false
                })
            },
            search() {
                this.listQuery = {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
					currentPage: 1,
					pageSize: 20,

                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            }
        }
    }
</script>